// Footer.tsx
import { useState, useEffect } from 'react'
import './Footer.scss'
import { Button, Modal } from 'antd'
import LoginPopup from '../LoginPopup/LoginPopup' // 根据路径调整
import ReturnTop from '../ReturnTop/ReturnTop'
function Footer() {
  const [isVisible, setIsVisible] = useState(true)
  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null)
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [showLogin, setShowLogin] = useState(false)
  useEffect(() => {
    checkLoginStatus()

    const handleScroll = () => {
      if (!isLoggedIn) { // 仅在未登录时响应滚动
        setIsVisible(false)
        if (timeoutId) clearTimeout(timeoutId)
        const newId = setTimeout(() => setIsVisible(true), 300)
        setTimeoutId(newId)
      }
    }

    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
      if (timeoutId) clearTimeout(timeoutId)
    }
  }, [timeoutId, isLoggedIn]) // 添加 isLoggedIn 依赖

  // 检查登录状态
  const checkLoginStatus = () => {
    const token = localStorage.getItem('token')
    setIsLoggedIn(!!token)
  }



  return (
    <>
    <ReturnTop />

      {!isLoggedIn && (
        <div className={`footer ${isVisible ? 'visible' : 'hidden'}`}>

         

          <div className="footer-content">

            <div className="footer-left">
              <h3>一步极速注册登录，爆款营销物料在线制作</h3>
              <div className="features">
                <span>
                  <img src="https://st0.dancf.com/market-operations/market/side/1718702239915.png?x-oss-process=image/resize,w_35,h_35/interlace,1/format,webp" alt="" />
                  20w+商用模板
                </span>
                <span>
                  <img src="https://st0.dancf.com/market-operations/market/side/1718702267372.png?x-oss-process=image/resize,w_35,h_35/interlace,1/format,webp" alt="" />
                  AI智能创作工具
                </span>
                <span>
                  <img src="https://st0.dancf.com/market-operations/market/side/1718702323032.png?x-oss-process=image/resize,w_35,h_35/interlace,1/format,webp" alt="" />
                  百万正版素材
                </span>
                <span>
                  <img src="https://st0.dancf.com/market-operations/market/side/1718702339616.png?x-oss-process=image/resize,w_35,h_35/interlace,1/format,webp" alt="" />
                  多端协作同步
                </span>

              </div>
            </div>
            <div className="footer-right">
              <Button
                type='primary'
                className="login-btn"
                onClick={() => {

                  setShowLogin(true)
                }}
              >
                立即登录
              </Button>
            </div>

          </div>
          <Modal
            open={showLogin}
            footer={null}
            onCancel={() => {
              setShowLogin(false)
              setIsVisible(true)
            }}
            width={800}

          >
            <LoginPopup
              onLoginSuccess={() => {
                setShowLogin(false)
                // 登录成功后保持Footer隐藏
              }}
            />
          </Modal>
        </div>
      )}
      <Modal
        open={showLogin}
        footer={null}
        onCancel={() => setShowLogin(false)}
        width={800}
     
      >
        <LoginPopup
          onLoginSuccess={() => {
            setShowLogin(false)
            checkLoginStatus() // 登录成功后重新检查状态
          }}
        />
      </Modal>

    </>
  )
}

export default Footer